/**
 *    SPDX-License-Identifier: Apache-2.0
 */

import React, { Component } from 'react';
import Slider from 'react-slick';
import compose from 'recompose/compose';
import { connect } from 'react-redux';

import Logo from '../../static/images/logo.jpg';
import { getHeaderCount as getCountHeaderCreator } from '../../store/actions/header/action-creators';
import { getPeerList as getPeerListCreator } from '../../store/actions/peer/action-creators';
import { getBlockList as getBlockListCreator } from '../../store/actions/block/action-creators';
import { getTransactionList as getTransactionListCreator } from '../../store/actions/transactions/action-creators';
import { getBlocksPerMin as getBlocksPerMinCreator } from '../../store/actions/charts/action-creators';
import { getBlocksPerHour as getBlocksPerHourCreator } from '../../store/actions/charts/action-creators';
import { getTxPerMin as getTxPerMinCreator } from '../../store/actions/charts/action-creators';
import { getTxPerHour as getTxPerHourCreator } from '../../store/actions/charts/action-creators';
import { getChannelList as getChannelListCreator } from '../../store/actions/chanelList/action-creators';
import { getChannel as getChannelCreator } from '../../store/actions/channel/action-creators';
import { getHeaderCount as getHeaderCountCreator } from '../../store/actions/header/action-creators';
import { getChaincodes as getChaincodesCreator } from '../../store/actions/chaincodes/action-creators';
import { getTxByOrg as getTxByOrgCreator } from '../../store/actions/charts/action-creators';
class LandingPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            settings: {
                dots: false,
                infinite: true,
                autoplay: true,
                autoplaySpeed: 2000,
                pauseOnHover: false,
                accessibility: false,
                speed: 500,
                slidesToShow: 1,
                slidesToScroll: 1
            },
            logoStyle: {
                width: '520px',
               
            },name:'root',pwd:'csbr2018'
        }
    }
    componentWillReceiveProps(nextProps) {//props改变时参数可获取新的props而this.props这时还是旧的，可以来更新state
        if (nextProps.channel.currentChannel !== this.props.channel.currentChannel) {
            this.props.getPeerList(nextProps.channel.currentChannel);
            this.props.getHeaderCount(nextProps.channel.currentChannel);
            this.props.getTxPerHour(nextProps.channel.currentChannel);
            this.props.getTxPerMin(nextProps.channel.currentChannel);
            this.props.getBlocksPerHour(nextProps.channel.currentChannel);
            this.props.getBlocksPerMin(nextProps.channel.currentChannel);
            this.props.getTransactionList(nextProps.channel.currentChannel, 0);
            this.props.getBlockList(nextProps.channel.currentChannel, 0);
            this.props.getChaincodes(nextProps.channel.currentChannel);
            this.props.getTxByOrg(nextProps.channel.currentChannel);
        }
    }
    componentDidMount() {
    }
    submit=()=>{
        if(this.state.name!='root' || this.state.pwd!='csbr2018'){
            alert('请输入正确的用户名和密码')
        }else{
            this.props.loginAction();
        }
    }
    change=(e)=>{
        this.setState({
            [e.target.name]:e.target.value
        })
    }
    render() {
        return (
            <div className="login" >
                <div className="login_header">
                    <h1><img src={Logo}  alt="" /></h1>
                    
                    <div></div>
                </div>
                
                <div className="login_box">
                    <div className="login-user">
                        <img src={require('../../static/images/c1_07.png')} />
                        <p>
                        <   input type="" name="name" value={this.state.name} placeholder="登录账户" onChange={this.change} />
                        </p>
                        <p>
                            <input type="password" name="pwd" value={this.state.pwd} placeholder="登录密码" onChange={this.change}/>
                        </p>
                        <p>
                            <button  onClick={this.submit}>
                            登录
                            </button>
                        </p>
                    </div>
                </div>
            </div>
        );
    }

    login=(props)=>{
       // console.log('跳转');
       // console.log(this);
        // console.log(this.context.router);
       // console.log(this.props.history);
        // this.props.history.pushState(null, '/foo')}
        // this.context.router.push('/home');
        // this.context.router.history.push(Layout);
        // console.log(React);
        // console.log(Router);
        // console.log(Router.props);
        // console.log(this.props); 
        // console.log(Router.context);
        // router.push(App,'/App')

        // browserHistory.push('/App');
        this.state.login=true;
    }
}



const mapDispatchToProps = (dispatch) => ({
    getCountHeader: (curChannel) => dispatch(getCountHeaderCreator(curChannel)),
    getHeaderCount: (curChannel) => dispatch(getHeaderCountCreator(curChannel)),
    getTxPerHour: (curChannel) => dispatch(getTxPerHourCreator(curChannel)),
    getTxPerMin: (curChannel) => dispatch(getTxPerMinCreator(curChannel)),
    getBlocksPerHour: (curChannel) => dispatch(getBlocksPerHourCreator(curChannel)),
    getBlocksPerMin: (curChannel) => dispatch(getBlocksPerMinCreator(curChannel)),
    getTransactionList: (curChannel, offset) => dispatch(getTransactionListCreator(curChannel, offset)),
    getBlockList: (curChannel, offset) => dispatch(getBlockListCreator(curChannel, offset)),
    getPeerList: (curChannel) => dispatch(getPeerListCreator(curChannel)),
    getChaincodes: (curChannel) => dispatch(getChaincodesCreator(curChannel)),
    getTxByOrg: (curChannel) => dispatch(getTxByOrgCreator(curChannel))

});
const mapStateToProps = state => ({
    countHeader: state.countHeader,
    channel: state.channel.channel
});
export default compose(
    connect(mapStateToProps, mapDispatchToProps),
)(LandingPage);
